@charset "utf-8";
@import "common/common";
.active .boy {
    animation-name: bounceInUp;
}

.active .p_photo {
    animation-name: bounceIn;
}

.active li:nth-of-type(1) {
    animation-name: fadeInLeftBig;
}

.active li:nth-of-type(2) {
    animation-name: fadeInLeftBig;
    animation-delay: 100ms;
}

.active li:nth-of-type(3) {
    animation-name: fadeInLeftBig;
    animation-delay: 150ms;
}

.active li:nth-of-type(4) {
    animation-name: fadeInLeftBig;
    animation-delay: 200ms;
}

.wab {
    background: url(../images/内页1.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    header {
        .boy {
            padding-top: n(48px);
            margin-left: n(40px);
            span {
                font-size: n(40px);
                display: inline-block;
                color: white;
            }
        }
        .p_photo {
            text-align: center;
            margin-top: n(40px);
            img {
                width: 36%;
            }
        }
    }
    section {
        position: relative;
        .tfboy {
            margin-top: n(60px);
            margin-left: n(96px);
            position: relative;
            ul {
                line-height: n(100px);
                text-align: left;
                li {
                    background: url(../images/kuang.png) no-repeat 0px/200px;
                    padding-left: n(20px);
                    //                  border-radius: n(100px);
                    //                  margin-top: n(90px);
                    font-size: n(40px);
                    img {
                        visibility: hidden;
                    }
                    &:hover {
                        background: url(../images/yellow.png) no-repeat 0px/200px;
                    }
                }
            }
        }
        .d_dog {
            img {
                width: 23%;
                position: absolute;
                bottom: n(-32px);
                right: n(10px);
            }
        }
        .mao {
            img {
                &:nth-of-type(1) {
                    position: absolute;
                    bottom: 40px;
                    right: 78px;
                    width: 10%;
                    animation: autoRotate 2s linear 1s infinite;
                    animation-fill-mode: forwards;
                }
                &:nth-of-type(2) {
                    position: absolute;
                    bottom: 70px;
                    right: 80px;
                    width: 10%;
                    animation: autoRotate 2s linear 1.1s infinite;
                    animation-fill-mode: forwards;
                }
                &:nth-of-type(3) {
                    position: absolute;
                    bottom: 97px;
                    right: 78px;
                    width: 12%;
                    animation: autoRotate 2s linear 1.3s infinite;
                    animation-fill-mode: forwards;
                }
                &:nth-of-type(4) {
                    position: absolute;
                    bottom: 115px;
                    right: 70px;
                    width: 14%;
                    animation: autoRotate 2s linear 1.4s infinite;
                    animation-fill-mode: forwards;
                }
                &:nth-of-type(5) {
                    position: absolute;
                    bottom: 142px;
                    right: 70px;
                    width: 15%;
                    animation: autoRotate 2s linear 1.6s infinite;
                    animation-fill-mode: forwards;
                }
            }
        }
        @keyframes autoRotate {
            0% {
                opacity: 0;
            }
            to {
                transform: translateY(-50px);
                opacity: 1;
            }
        }
    }
}

@media only screen and (min-height: 0px) and (max-height:555.5px) {
    .wab section .tfboy {
        margin-top: 2%;
        margin-left: 12%;
    }
    .wab section .d_dog img {
        bottom: 4%;
        width: 16%;
    }
    .wab section .mao img:nth-of-type(1) {
        right: 12%;
    }
    .wab section .mao img:nth-of-type(2) {
        right: 12%;
    }
    .wab section .mao img:nth-of-type(3) {
        right: 12%;
    }
    .wab section .mao img:nth-of-type(4) {
        right: 12%;
    }
    .wab section .mao img:nth-of-type(5) {
        right: 12%;
    }
    .wab header .p_photo img {
        width: 38%;
    }
}

@media only screen and (min-height: 556px) and (max-height:591px) {
    .wab header .p_photo img {
        width: 46%;
    }
    .wab section .mao img:nth-of-type(1) {
//      right: 12%;
        bottom:4% ;
    }
    .wab section .mao img:nth-of-type(2) {
//      right: 12%;
        bottom: 18%;
    }
    .wab section .mao img:nth-of-type(3) {
//      right: 12%;
        bottom: 34%;
    }
    .wab section .mao img:nth-of-type(4) {
//      right: 12%;
        bottom: 45%;
    }
    .wab section .mao img:nth-of-type(5) {
//      right: 12%;
        bottom: 60%;
    }
}